<template>
  <Form.Item>
    <Table>
      <tr>
        <th>{{ leftTitle }}</th>
        <th>{{ rightTitle }}</th>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td class="py-2 px-4 w-48">
          <Select
            style="width: 100%"
            v-if="isSelect"
            v-model:value="item.key"
            :options="options[selectType]"
            required
          />
          <Input v-else v-model:value="item.key" placeholder="Source attribute key" required />
        </td>
        <td class="py-2 px-4 w-48">
          <Select
            style="width: 100%"
            v-if="resultType === 'array'"
            v-model:value="item.value"
            :options="entityTypeOptions"
            mode="tags"
            required
          />
          <Input v-else v-model:value="item.value" placeholder="Target key" required />
        </td>
        <td class="py-2 px-4">
          <Tooltip title="Remove mapping entry" class="pl-4">
            <Icon :icon="ICON.DELETE" :size="20" class="cursor-pointer" @click="deleteRow(index)" />
          </Tooltip>
        </td>
      </tr>
      <tr>
        <td class="py-2 px-4">
          <Button class="btn-add" type="text" @click="addRow">Add mapping</Button>
        </td>
      </tr>
    </Table>
  </Form.Item>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import Icon from '/@/components/Icon';
  import { ICON } from '/@/enums/iconEnum';
  import { Input, Button, Form, Select } from 'ant-design-vue';
  import { options, entityTypeOptions } from './tableForm.data';

  const props = defineProps({
    modelValue: {
      type: Array,
      default: () => [],
    },
    leftTitle: {
      type: String,
      default: '',
    },
    rightTitle: {
      type: String,
      default: '',
    },
    isSelect: {
      type: Boolean,
      default: false,
    },
    selectType: {
      type: String,
      default: '',
    },
    resultType: {
      type: String,
      default: 'object',
    },
  });
  const emits = defineEmits(['update:modelValue']);
  const list = ref<Recordable>([
    {
      key: 'alarmThreshold',
      value: 'threshold',
    },
  ]);

  watch(
    () => list.value,
    (nVal) => {
      if (props.resultType === 'object') {
        const obj = {};
        nVal.forEach((item: Recordable) => {
          obj[item.key] = item.value;
        });
        emits('update:modelValue', obj);
      } else if (props.resultType === 'array') {
        const arr: Recordable[] = [];
        nVal.forEach((item: Recordable) => {
          arr.push({
            relationType: item.key,
            entityTypes: item.value,
          });
        });
        emits('update:modelValue', arr);
      } else {
      }
    },
    {
      deep: true,
    },
  );

  const addRow = () => {
    list.value.push({ key: '', value: '' });
  };

  const deleteRow = (index: number | string) => {
    list.value.splice(Number(index), 1);
  };

  onMounted(() => {
    if (props.resultType === 'object') {
      if (props.modelValue) {
        const arr = Object.keys(props.modelValue);
        if (arr.length > 0) {
          list.value = arr.map((key: string) => {
            return {
              key,
              value: props.modelValue[key],
            };
          });
        }
      }
    } else if (props.resultType === 'array') {
      if (props.modelValue && props.modelValue.length > 0) {
        list.value = [];
        props.modelValue.forEach((item: Recordable) => {
          list.value.push({
            key: item.relationType,
            value: item.entityTypes,
          });
        });
      } else {
        list.value = [
          {
            key: 'Contains',
            value: ['DEVICE'],
          },
        ];
      }
    }
  });
</script>

<style lang="less" scoped>
  .btn-add {
    border-radius: 5px;
    border: 1px solid gainsboro;
  }
</style>
